import React, { Component } from 'react';

import './../lastupload.scss';

class Com extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }
  componentDidMount () {
    // let f_type = '本周最受欢迎';
    // let type = JSON.stringify(f_type)
    // fetch(`http://10.8.165.23:8080/api/food/type?f_type=`+type)
    // .then(res => res.json())
    // .then(data => {
    //   console.log(data)
    //   this.setState({
    //     dat: data
    //   })
    // })
     let f_name = '主食';
    let name = JSON.stringify(f_name)
    fetch(`https://sun.daxunxun.com/api/food/kind?f_name=`+name)
    .then(res => res.json())
    .then(data => {
      console.log(data)
      this.setState({
        dat: data
      })
    })
  }
  goDetail (fid){
    this.props.history.push('/detail/' + fid)
  }
  goUsers (uname) {
    this.props.history.push('/users/'+ uname)
    localStorage.setItem('u_name', JSON.stringify(uname))
  }
  render () {
    const dat = this.state.dat
    let pop = [];
    for (let i in dat ) {
      if (i<6) {
      //  console.log(dat[i])
       let fid = dat[i].f_id  // 获取食物id
       let uname = dat[i].u_name
        pop.push(
          <li  key={dat[i].f_id}>
            <div className="allupdate-containerImg" onClick={ this.goDetail.bind(this, fid)}>
              <img src = {dat[i].banner} alt=""/>
            </div>
            <h2>晚餐●2018年12月28日</h2>
            <p  key={dat[i].f_id} className="allupdate-name">{dat[i].content.c1}</p>
            <p className="allupdate-red"><span>21小时前</span><span><i className="iconfont icon-chakan"></i>{dat[i].number}</span><span><i className="iconfont icon-xinxi"></i>79</span></p>
            <p className="allupdate-user" onClick={ this.goUsers.bind(this,uname)}><img src="http://i2.chuimg.com/0a6271d0e40b4b3580e2bf1b6c0fae56_160w_160h.jpg?imageView2/1/w/160/h/160/interlace/1/q/90" alt="" />
            <span>{dat[i].u_name}</span><span className="iconfont icon-chushimao2"></span></p>
            
           
          </li>
        )
      }
    }
    return (
      <div className="works-update">
        <div className="works-allupdate">
          <div className="allupdate-container">
            <ul className="allupdate-container-list">
            {
              pop
            }
            </ul>
          </div>

        </div>
      </div>  
    )
  }
}

export default Com;
